<template>
  <div class="message-page">
    <!-- 消息类型切换 -->
    <div class="message-tabs">
      <button :class="{ active: messageType === 'system' }"
@click="messageType = 'system'">
        系统通知
      </button>
      <button :class="{ active: messageType === 'user' }"
@click="messageType = 'user'">
        用户消息
      </button>
    </div>

    <!-- 消息列表 -->
    <div class="message-list">
      <div
        v-for="(item, index) in filteredMessages"
        :key="index"
        class="message-item"
        :class="{ unread: !item.read }"
        @click="viewMessage(item)"
      >
        <div class="avatar">
          <img
:src="item.avatar" alt="头像" />
        </div>
        <div class="content">
          <div class="header">
            <span class="sender">{{ item.sender }}</span>
            <span class="time">{{ item.time }}</span>
          </div>
          <div class="preview">
            {{ item.preview }}
          </div>
        </div>
        <div v-if="!item.read"
class="badge" />
      </div>
    </div>

    <!-- 浮动按钮 -->
    <button class="float-btn"
@click="newMessage">
      <img
src="@/assets/edit-icon.png" alt="新建消息" />
    </button>
  </div>
</template>

<script setup>
  import { ref, computed } from 'vue'

  const messageType = ref('system') // system/user

  const messages = ref([
    {
      id: 1,
      type: 'system',
      sender: '系统通知',
      avatar: '@/assets/system-avatar.png',
      preview: '您的合同HT20250001即将到期，请及时处理',
      time: '10分钟前',
      read: false,
    },
    {
      id: 2,
      type: 'system',
      sender: '系统通知',
      avatar: '@/assets/system-avatar.png',
      preview: '案件AJ20250001状态已更新为"处理中"',
      time: '2小时前',
      read: true,
    },
    {
      id: 3,
      type: 'user',
      sender: '李四',
      avatar: '@/assets/user-avatar.png',
      preview: '关于合同HT20250001的补充协议已发送，请查收',
      time: '昨天',
      read: false,
    },
    {
      id: 4,
      type: 'user',
      sender: '王五',
      avatar: '@/assets/user-avatar.png',
      preview: '案件AJ20250001需要补充一些材料，请尽快提供',
      time: '3天前',
      read: true,
    },
  ])

  const filteredMessages = computed(() => {
    return messages.value.filter(item => item.type === messageType.value)
  })

  const viewMessage = item => {
    item.read = true
    console.log('查看消息:', item)
  }

  const newMessage = () => {
    console.log('新建消息')
  }
</script>

<style scoped lang="scss">
  .message-page {
    padding: 15px;
    position: relative;
    height: 100vh;

    .message-tabs {
      display: flex;
      margin-bottom: 15px;
      border-bottom: 1px solid #eee;

      button {
        flex: 1;
        padding: 12px;
        background: none;
        border: none;
        font-size: 16px;
        color: #666;
        position: relative;

        &.active {
          color: #1989fa;
          font-weight: bold;

          &::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 20%;
            right: 20%;
            height: 3px;
            background: #1989fa;
            border-radius: 3px;
          }
        }
      }
    }

    .message-list {
      .message-item {
        display: flex;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
        position: relative;

        &.unread {
          background: #f9f9f9;
        }

        .avatar {
          width: 40px;
          height: 40px;
          margin-right: 12px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
          }
        }

        .content {
          flex: 1;

          .header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;

            .sender {
              font-weight: bold;
              font-size: 15px;
            }

            .time {
              font-size: 12px;
              color: #999;
            }
          }

          .preview {
            font-size: 14px;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .badge {
          position: absolute;
          top: 15px;
          left: 28px;
          width: 10px;
          height: 10px;
          background: #ff4d4f;
          border-radius: 50%;
          border: 2px solid white;
        }
      }
    }

    .float-btn {
      position: fixed;
      bottom: 80px;
      right: 20px;
      width: 50px;
      height: 50px;
      background: #1989fa;
      border: none;
      border-radius: 50%;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

      img {
        width: 24px;
        height: 24px;
      }
    }
  }
</style>
